<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<style type="text/css">
        #fm{
            margin:0;
            padding:10px 50px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:160px;
        }
    </style>
	
	<link rel="stylesheet" type="text/css" href="<%=path %>/js/jquery-easyui-1.4.4/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/js/jquery-easyui-1.4.4/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=path %>/js/jquery-easyui-1.4.4/demo/demo.css">
	<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.4/jquery.easyui.min.js"><script>
	<script  type="text/javascript">
		
	</script>
</head>
<body>
	<h2>员工信息维护</h2>
	<div style="margin:20px 0;"></div>
	<div class="easyui-layout" style="width:100%;height:90%;">
		 <div data-options="region:'north'" style="height:50px;width:100%">
		 	<form id="searchForm">
		 	  	<div style="float: left; padding:20px 0 0 20px; ">   
			        <label for="empCode">员工编码:</label>   
			        <input class="easyui-validatebox" type="text" name="empCode"  id="s_empCode" />   
			    </div>   
		 		<div style="float: left; padding:20px 0 0 20px; ">   
			        <label for="empName">员工姓名:</label>   
			        <input class="easyui-validatebox" type="text" name="empName"  id="s_empName" />   
			    </div>   
			    <div style="float: left; padding:20px 0 0 20px; ">   
			        <label for="empSex">性别:</label>   
			        <input id="s_empSex"  name="s_empSex" class="easyui-combobox" data-options="valueField:'value',textField:'text',data:[{'value':'男','text':'男'},{'value':'女','text':'女'}]"/>
			    </div>
			    <div style="float: left;padding:20px 0 0 20px;">   
			        <input class="easyui-validatebox" type="button" value="查询"  onclick="searchEmp()"/>   
			        <input class="easyui-validatebox" type="button" value="重置"  onclick="clearEmp()"/>   
			    </div>    
		 	</form>
		 </div>
		<!--<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:100px;"></div>-->
		<div data-options="region:'center',title:'用户列表',iconCls:'icon-ok'">
			<table class="easyui-datagrid" 
			  		 id="employeeList"
					 toolbar="#toolbar"
					 pagination="true"
					 rownumbers="true"
					data-options="method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
			</table>
			<div id="toolbar">
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newEmp()">新增</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editEmp()">修改</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeEmp()">删除</a>
			</div>
		</div>
	</div>
	
	<div id="emp_win" class="easyui-window"  closed="true" style="padding:10px 0 0 10px; ">
			<form id="empForm"  method="post" >
			   <div class="fitem" hidden="true">
					<input id="empId" name="empId" class="easyui-validatebox" />
				</div>
				<div class="fitem">
					<label style="text-align:right" >姓名:</label>
					<input id="empName" name="empName" class="easyui-validatebox" required="true"/>
				</div>
				<div class="fitem">
					<label style="text-align:right">编码:</label>
					<input id="empCode" name="empCode" class="easyui-validatebox" required="true"/>
				</div>
				<div class="fitem">
					<label style="text-align:right">性别:</label>
					<input id="empSex" name="empSex" class="easyui-combobox" required="true"  data-options="valueField:'value',textField:'text',data:[{'value':'男','text':'男'},{'value':'女','text':'女'}]"/>
				</div>
				<div class="fitem">
					<label style="text-align:right"> 身份证号:</label>
					<input id="idNo" name="idNo" class="easyui-validatebox" required="true"/>
				</div>
				<div class="fitem">
					<label style="text-align:right">电话:</label>
					<input id="phoneNo" name="phoneNo" class="easyui-validatebox" />
				</div>
				<div class="fitem">
					<label style="text-align:right">地址:</label>
					<textarea id="adress" rows=3 name="adress" cols=23 class="textarea easyui-validatebox"></textarea> 
				</div>
				<div class="fitem">
					<label style="text-align:right">邮箱:</label>
					<input id="email" name="email" class="easyui-validatebox" validType="email"/>
				</div>
			</form>
			<div id="emp_buttons" align="center">
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveEmp()" >保存</a>
		        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$win.window('close')" >取消</a>
			</div>
	</div>
	
	
 	<script type="text/javascript">
 		$('#employeeList').datagrid({
 				title:'员工列表',
 				url:'emp/empList',
 				pageSize:'50',
 				fit:true,
 				method:'post',
 				striped: true,
 				columns: [  
		            [  
		            	{field:'empId', title: '员工id', width: 180, hidden:'true',align: "left"},  
		                {field:'empCode', title: '员工编码', width: 180, align: "left"},
		                {field: 'empName', title: '员工名称', width: 180, align: "left"},
		                {field: 'empSex', title: '性别', width: 180, align: 'center'},
		                {field: 'idNo', title: '身份证号', width: 180, align: "right"},
		                {field: 'phoneNo', title: '电话', width: 180, align: "right"},
		                {field: 'adress', title: '地址', width: 180, align: "left"},
		                {field: 'email', title: '邮箱', width: 180, align: "left"}
		            ]  
		        ]
 		});
 		
 		function searchEmp(){
 			var empCode = $('#s_empCode').val();
 			var empName = $('#s_empName').val();
 			var empSex = $("#s_empSex").combobox('getValue');
 			$('#employeeList').datagrid('load',{empCode:empCode,empName:empName,empSex:empSex});
 		}
 		
 		function clearEmp(){
 			$('#searchForm').form('clear');
 			searchEmp();
 		}
 		
 		function newEmp(){
			$('#empForm').form('clear');
			$win.window('open').dialog('setTitle','新增用户信息');
		}
		
		function editEmp(){
			var row = $('#employeeList').datagrid('getSelected');
            if (row){
                $win.window('open').dialog('setTitle','编辑用户信息');
                $('#empForm').form('load',row);
            }else{
            	$.messager.alert("提示","请选择需要修改的信息！");
            }
		}
 		
 		function removeEmp(){
			var row = $('#employeeList').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','确定要删除吗?',function(r){
                    if (r){
                        $.post('emp/deleteEmp.do',{empId:row.empId},function(result){
                            if (result.flag==1){
                                $('#employeeList').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.alert("提示",result.errorMsg);
                            }
                        },'json');
                    }
                });            
            }else{
            	$.messager.alert("提示","请选择需要删除的信息！");
            }
		}
 		
 		 function saveEmp(){
            $('#empForm').form('submit',{
                url: 'emp/saveEmp',
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.flag=0){
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $win.window('close');        
                        $('#employeeList').datagrid('reload');    
                    }
                }
            });
        }
 		
 		//设置分页控件  
 		$(function () {
 			var p = $('#employeeList').datagrid('getPager');  
		    $(p).pagination({  
		        pageSize: 50,//每页显示的记录条数，默认为10  
		        pageList: [50, 100, 150],//可以设置每页记录条数的列表  
		        beforePageText: '第',//页数文本框前显示的汉字  
		        afterPageText: '页    共 {pages} 页',  
		        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'  
		    });
 		});
 		
 		var $win;
		$win = $('#emp_win').window({
		    title: '添加员工信息',
		    width: 300,
		    height: 320,
		    top: ($(window).height() - 350) * 0.5,
		    left: ($(window).width() - 450) * 0.5,
		    shadow: true,
		    modal: true,
		    iconCls: 'icon-add',
		    closed: true,
		    minimizable: false,
		    maximizable: false,
		    collapsible: false
		});
		$(document).ready(function() {
			document.onkeydown = function(e){
				if(e.keyCode===13){
					searchEmp();
				}
			};
		});
 	</script>
</body>
</html>
